<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="../favicon.ico">
    <% if (!note.hasLabel("shareOmitDefaultCss")) { %>
    <link href="../libraries/normalize.min.css" rel="stylesheet">
    <link href="../stylesheets/share.css" rel="stylesheet">
    <% } %>
    <% if (note.type === 'text' || note.type === 'book') { %>
    <link href="../libraries/ckeditor/ckeditor-content.css" rel="stylesheet">
    <% } %>
    <% for (const cssRelation of note.getRelations("shareCss")) { %>
    <link href="api/notes/<%= cssRelation.value %>/download" rel="stylesheet">
    <% } %>
    <title><%= note.title %></title>
</head>
<body>
    <div id="layout">
        <div id="main">
            <h1 id="title"><%= note.title %></h1>

            <div id="content" class="note-<%= note.type %> <% if (note.type === 'text') { %>ck-content<% } %>">
                <%- content %>
            </div>
        </div>

        <% if (subRoot.hasChildren()) { %>
        <button id="menuButton"></button>

        <nav id="menu">
            <%- include('tree_item', {note: subRoot, activeNote: note}) %>
        </nav>
        <% } %>
    </div>

    <script>
        (function () {
            const menuButton = document.getElementById('menuButton');
            const layout = document.getElementById('layout');

            menuButton.addEventListener('click', () => layout.classList.toggle('navMenu'));
        }());
    </script>
</body>
</html>
